import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity,
    DeviceEventEmitter,
    ScrollView
} from 'react-native';

import ImagePicker from 'react-native-image-picker'

import Constant from '../Constant/Constant'
import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import ToastUtils from '../Utils/ToastUtils'
import HttpUtils from '../Utils/HttpUtils'
import RuleUtils from '../Utils/RuleUtils'
import EncryptUtils from '../Utils/EncryptUtils'
import RouterUtils from '../Utils/RouterUtils'
import StorageUtils from '../Utils/StorageUtils'
import TimeUtils from '../Utils/TimeUtils'

const options = {
    title: '请选择',
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '选择相册',
    quality: 0.75,
    allowsEditing: false,
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: 'images',
    },
}

export default class PPageBjgxEdit extends React.Component
{
    static navigationOptions = ({navigation}) => ({
        gesturesEnabled: false,//是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
        headerTitle: '更新部件',
        headerStyle: {
            backgroundColor: ColorUtils.blue,
            height: ScreenUtils.statusBarHeight,
        },
        headerRight: (<Text></Text>),
        headerTintColor: ColorUtils.white,
        headerTitleStyle: {
            fontSize: ScreenUtils.Font_18,
            color: ColorUtils.white,
            fontWeight: 'normal',
            flex: 1,
            alignSelf: 'center',
            textAlign: 'center',
        }
    });

    constructor(props)
    {
        super(props);
        this.state = {
            leixing: '请选择',
            bigType: '请选择',
            smallType: '请选择',
            result: '请选择结果'
        };
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('PPageBjgxEdit', this.props.navigation.state.key);
    }

    componentWillUnmount()
    {
        RouterUtils.popRouter('PPageBjgxEdit', this.props.navigation.state.key);
    }

    jumpPageBigTypeSelect()
    {
        this.props.navigation.navigate('PageTypeBigSelect',
            {
                transition: 'forVertical',
                'leixing': '部件',
                callback: ((result) =>
                {
                    this.setState({
                        bigType: result
                    })
                })
            })
    }

    jumpPageSmallTypeSelect()
    {
        this.props.navigation.navigate('PageTypeSmallSelect',
            {
                transition: 'forVertical',
                'bigType': this.state.bigType,
                callback: ((result) =>
                {
                    this.setState({
                        smallType: result
                    })
                })
            })
    }

    jumpLocation()
    {
        this.props.navigation.navigate('WebPage', {'title': '当前位置', 'url': 'https://www.sasz.cn/location.html'})
    }

    jumpPhoto()
    {
        ImagePicker.showImagePicker(options, (response) =>
        {
            console.log('Response = ', response);

            if (response.didCancel)
            {
                console.log('User cancelled image picker');
            } else if (response.error)
            {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton)
            {
                console.log('User tapped custom button: ', response.customButton);
            } else
            {
                const source = {uri: response.uri};

                ToastUtils.toastShortBottom('上传图片');
                // var that = this;
                // HttpUtils.uploadPic(response.uri, function (responseData)
                // {
                //     console.log('responseData:' + responseData);
                //     ToastUtils.toastShortBottom('上传图片成功');
                //     var imgUrl = {url: responseData.url.toString()};
                //     if (type == '服务前')
                //     {
                //         that.state.orderBeforeImgs.push(imgUrl);
                //         that.setState({
                //             orderBeforeImgs: that.state.orderBeforeImgs
                //         })
                //         console.log(that.state.orderBeforeImgs)
                //     } else if (type == '服务后')
                //     {
                //         that.state.orderFinishImgs.push(imgUrl);
                //         that.setState({
                //             orderFinishImgs: that.state.orderFinishImgs
                //         })
                //         console.log(that.state.orderFinishImgs)
                //     }
                // });
            }
        });
    }

    showBottomItem()
    {
        this.SimpleItemsDialog.show();
    }

    jumpSuccess()
    {
        this.props.navigation.goBack(RouterUtils.array[2].pageKey);
    }

    render()
    {
        return (
            <View style={styles.container}>
                <View style={{justifyContent: 'center', alignItems: 'center', paddingLeft: 16, paddingRight: 16}}>
                    <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpPageBigTypeSelect()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>大类</Text>
                        <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.bigType}</Text>
                        <Image style={{width: 9, height: 16}} source={require('../img/arrowright.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpPageSmallTypeSelect()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>小类</Text>
                        <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{this.state.smallType}</Text>
                        <Image style={{width: 9, height: 16}} source={require('../img/arrowright.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpLocation()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>原位置</Text>
                        <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>请定位所在位置</Text>
                        <Image style={{width: 14, height: 18}} source={require('../img/map_location.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpLocation()} style={{flexDirection: 'row', alignItems: 'center', height: 50, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <Text style={{flex: 1, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>新位置</Text>
                        <Text style={{marginRight: 16, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>请定位所在位置</Text>
                        <Image style={{width: 14, height: 18}} source={require('../img/map_location.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} onPress={() => this.jumpPhoto()} style={{flexDirection: 'row', height: 120, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderBottomColor: ColorUtils.line}}>
                        <View style={{width: 80, height: 50, flexDirection: 'row', alignItems: 'center',}}>
                            <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>照片</Text>
                        </View>
                        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                            <View style={{height: 104, flexDirection: 'row', alignItems: 'center',}}>
                                <Image style={{width: 80, height: 80, borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, marginRight: 8,}} source={{uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_8000&sec=1602767880829&di=0bfdf61a44835886c332853c2f3263d2&imgtype=0&src=http%3A%2F%2Fncwb.cnncw.cn%2Fpaperdata%2Fncwb%2F20170421%2F9e05c973d677be275dd8ed1ae5bacc77.jpg'}}/>
                                <Image style={{width: 80, height: 80, borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, marginRight: 8,}} source={{uri: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1273236598,498824810&fm=26&gp=0.jpg'}}/>
                                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderStyle: 'dashed', borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, width: 80, height: 80}}>
                                    <Image style={{width: 16, height: 16}} source={require('../img/img_add.png')}/>
                                </View>
                            </View>
                        </ScrollView>
                    </TouchableOpacity>
                    <View style={{flexDirection: 'row', height: 150, paddingTop: 8, paddingBottom: 8}}>
                        <View style={{width: 80, height: 50, flexDirection: 'row', alignItems: 'center',}}>
                            <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>描述</Text>
                        </View>
                        <View style={{flex: 1, borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, padding: 8}}>
                            <TextInput value={this.state.question} underlineColorAndroid='transparent'
                                       keyboardType={'default'} // 默认键盘类型
                                       autoCapitalize='none' // 取消首字母大写
                                       placeholder='请输入备注描述(非必填)'
                                       placeholderTextColor={ColorUtils.gray}
                                       multiline={true}
                                       onChangeText={(text) => this.setState({question: text})}
                                       style={{fontSize: ScreenUtils.Font_12, color: ColorUtils.black, width: "100%", height: "100%", textAlignVertical: 'top'}}/>
                        </View>
                    </View>
                </View>
                <View style={{margin: 32}}>
                    <TouchableOpacity onPress={() => this.jumpSuccess()}>
                        <View style={{justifyContent: 'center', alignItems: 'center', height: 44, padding: 4, borderRadius: 6, backgroundColor: ColorUtils.blue}}>
                            <Text style={{color: ColorUtils.white, fontSize: ScreenUtils.Font_14}}>
                                提交
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.white,
    },
});


